<script type="text/html" template lay-done="layui.data.temporaryPastdone(d);">
    <div class='roles-pastHtml-content'>
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="queryContent">
                    <div><label>姓名:</label><input name="username"/></div>
                    <div><label>单位:</label><input name="deparname"/></div>
                    <button>查询</button>
                </div>
                <div class="ztreeContainer">
                    <ul id='roles-pastHtml-ztree-department' class="ztree">
                    </ul>
                    <div id="pageBoxPast"></div>
                </div>
            </div>
        </div>
        <div class="layui-row" style="text-align: center;margin-top: 15px;">
            <div class="data-dep-container" name="" id="" cols="30" rows="10">
            </div>
            <button type="button" class="layui-btn T-confirm" data-groupstr="" data-depstr="">确认</button>
        </div>
    </div>
</script>
<style>
    .roles-pastHtml-content {
        padding: 0px 10px;
    }
    .roles-pastHtml-content .layui-btn{
        background: #2669B1;
        width: 20%;
        border-radius: 6px;
        font-size: 15px;
        letter-spacing: 2px;
        margin: 10px auto;
        -ms-behavior: url(../../dist/style/res/PIE.htc);
	    behavior: url(../../dist/style/res/PIE.htc);
    }
    .roles-pastHtml-content .ztreeContainer {
        height: 485px;
        overflow-y: auto;
    }
    .roles-pastHtml-content .queryContent{
        display: flex;
    }
    .roles-pastHtml-content .queryContent div{
        margin-right: 17px;
    }
    .queryContent input{
        border-radius: 5px;
        border: 1px #b5b5b5 solid;
        height: 30px;
        padding: 10px;
        margin: 20px 0 10px 10px;
        -ms-behavior: url(../../dist/style/res/PIE.htc);
	    behavior: url(../../dist/style/res/PIE.htc);
    }
    .queryContent button{
        background: #1b4a7c;
        border: 0;
        color: #fff;
        width: 60px;
        height: 25px;
        border-radius: 5px;
        margin: 23px auto 0;
        cursor: pointer;
        -ms-behavior: url(../../dist/style/res/PIE.htc);
	    behavior: url(../../dist/style/res/PIE.htc);
    }
    .roles-pastHtml-content .department-check,
    .roles-pastHtml-content .group-check {
        height: 70px;
        border: 1px solid #ccc;
        margin: 15px 0px 0px 13px;
        padding: 2px 2px;
    }

    .roles-pastHtml-content .check-value-box {
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }
    
    #roles-pastHtml-ztree-department li{
        display: flex;
        width: 89%;
        margin: 0 auto;
    }
    #roles-pastHtml-ztree-department .liActive{
        background: #a8ddff;
    }
    #roles-pastHtml-ztree-department li div{
        width: 50%;
        font-size: 14px;
        text-align: center;
        line-height: 36px;
        border: 1px #d0d0d0 solid;
    }
    .roles-pastHtml-content .data-dep-container{
        width: 89%;
        height: 100px;
        margin: 0px auto;
        border: 1px #b9b9b9 solid;
        padding: 10px;
    }
    .roles-pastHtml-content .data-dep-container div{
        float: left;
    }
    .roles-pastHtml-content #pageBoxPast{
        margin: 0 auto;
        width: 86%;
    }
    /* 滚动条样式 */
    ::-webkit-scrollbar{
        width: 4px;
        height: 4px;
    }
    ::-webkit-scrollbar-thumb{
        border-radius: 5px;
        -webkit-box-shaow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0,0,0,0.2);
        -ms-behavior: url(../../dist/style/res/PIE.htc);
		behavior: url(../../dist/style/res/PIE.htc);
    }
    ::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0;
        background: rgba(0,0,0,0.1);
        -ms-behavior: url(../../dist/style/res/PIE.htc);
		behavior: url(../../dist/style/res/PIE.htc);
    }
</style>
<script>
    layui.data.temporaryPastdone = function (d) {
        layui.use(['admin','laypage'], function () {
            var admin = layui.admin,
            $ = layui.$,
            laypage = layui.laypage;
            var current_page=null;
            admin.req({
                type:"post",
                url: 'myapi/DC/api/rest/web/custom/RoleUser',
                data:{
                  model:"select",
                  page:1,
                  count:10,
                  userName:"",
                  dept_name:""
                },
                success: function (res) {
                    if(res.data.length==undefined){
                        var data = res.data.data;
                    }else{
                        var data = res.data;
                    }
                    var liStr = "<li><div>姓名</div><div>单位</div></li>";
                    for(var i=0;i<data.length;i++){
                        liStr += "<li cert_code='"+data[i].cert_code+"' user_code='"+data[i].user_code+"' dept_code='"+data[i].dept_code+"'><div>"+data[i].userName+"</div><div>"+data[i].dept_name+"</div></li>"
                    }
                    $(".roles-pastHtml-content .ztree").empty().append(liStr);
                    laypage.render({
                        elem: 'pageBoxPast' //注意，这里的 test1 是 ID，不用加 # 号
                        ,count: res.data.totalNumber //数据总数，从服务端得到
                        ,limit: res.data.count  //一页几条
                        ,curr: 1  //当前页
                        ,jump:function(obj,first){
                            if(!first){
                                current_page = obj.curr
                                loadListTab(current_page);
                            }
                        }
                    });

                    if(d.params.exitDep.length!=0){
                        var datas = d.params.exitDep;
                        var divs = $(".roles-pastHtml-content .ztree li");
                        for(var i=0;i<datas.length;i++){
                            $.each($(".roles-pastHtml-content .ztree li"),function(index,ele){
                                if($(ele).attr("user_code")==datas[i].user_code){
                                    $(ele).addClass("liActive");
                                    var text = "<div cert_code='"+datas[i].cert_code+"' user_code='"+datas[i].user_code+"' dept_code='"+datas[i].dept_code+"' dept_name='"+datas[i].dept_name+"' userName='"+datas[i].userName+"'>"+datas[i].userName+"、</div>";
                                    $(".data-dep-container").append(text)
                                } 
                            }) 
                        }       
                    }
                }
            });

            $(".roles-pastHtml-content .ztree").delegate("li","click",function(e){
                e.stopPropagation();
                var cert_code=$(this).attr("cert_code");
                var user_code=$(this).attr("user_code");
                var dept_code=$(this).attr("dept_code");
                var userName=$(this).find("div").eq(0).html();
                var dept_name=$(this).find("div").eq(1).html();
                if($(this).hasClass("liActive")){
                    $(this).removeClass("liActive");
                    $.each($(".data-dep-container>div"),function(index,ele){
                        if($(ele).attr("user_code")==user_code){
                            $(ele).remove();
                        }
                    })
                }else{
                    if($(this).attr('cert_code')){
                        $(this).addClass("liActive");
                        var text = "<div cert_code='"+cert_code+"' user_code='"+user_code+"' dept_code='"+dept_code+"' dept_name='"+dept_name+"' userName='"+userName+"'>"+userName+"、</div>";
                        $(".data-dep-container").append(text);
                    }
                }
            })

            //查询
            $(".queryContent button").on("click",function(){
                var userName=$(".queryContent input[name=username]").val();
                var dept_name=$(".queryContent input[name=deparname]").val();

                admin.req({
                    type:"post",
                    url: 'myapi/DC/api/rest/web/custom/RoleUser',
                    data:{
                        model:"select",
                        page:1,
                        count:10,
                        userName:userName,
                        dept_name:dept_name
                    },
                    success: function (res) {                 
                        if(res.data.length==undefined){
                            var data = res.data.data;
                        }else{
                            var data = res.data;
                        }
                        var liStr = "<li><div>姓名</div><div>单位</div></li>";
                        for(var i=0;i<data.length;i++){
                            liStr += "<li cert_code='"+data[i].cert_code+"' user_code='"+data[i].user_code+"' dept_code='"+data[i].dept_code+"'><div>"+data[i].userName+"</div><div>"+data[i].dept_name+"</div></li>"
                        }
                        $(".roles-pastHtml-content .ztree").empty().append(liStr);

                        laypage.render({
                            elem: 'pageBoxPast' //注意，这里的 test1 是 ID，不用加 # 号
                            ,count: res.data.totalNumber //数据总数，从服务端得到
                            ,limit: res.data.count  //一页几条
                            ,curr: 1  //当前页
                            ,jump:function(obj,first){
                                if(!first){
                                    current_page = obj.curr
                                    loadListTab(current_page);
                                }
                            }
                        });
                    }
                });
            })

            function loadListTab(page){
                var userName=$(".queryContent input[name=username]").val();
                var dept_name=$(".queryContent input[name=deparname]").val();

                admin.req({
                    type:"post",
                    url: 'myapi/DC/api/rest/web/custom/RoleUser',
                    data:{
                    model:"select",
                    page:page,
                    count:10,
                    userName:userName,
                    dept_name:dept_name
                    },
                    success: function (res) {
                        if(res.data.length==undefined){
                            var data = res.data.data;
                        }else{
                            var data = res.data;
                        }
                        var liStr = "<li><div>姓名</div><div>单位</div></li>";
                        for(var i=0;i<data.length;i++){
                            liStr += "<li cert_code='"+data[i].cert_code+"' user_code='"+data[i].user_code+"' dept_code='"+data[i].dept_code+"'><div>"+data[i].userName+"</div><div>"+data[i].dept_name+"</div></li>"
                        }
                        $(".roles-pastHtml-content .ztree").empty().append(liStr);
                    }
                });
            }
        })
    }
</script>